<template>
	<view class="sms-login-page">
		<!-- 标题与说明 -->
		<view class="title">改绑手机号</view>
		<view class="desc">请输入正常使用的手机号进行绑定</view>

		<!-- 手机号输入区域 -->
		<view class="input-group">
			<view class="country-code">
				<text>+86</text>
				<view class="sanjiao"></view>
			</view>
			<input class="phone-input" type="number" placeholder="请输入您的手机号" v-model="phoneNumber"
				@input="handlePhoneInput" :class="{ 'error-border': showPhoneError }" />
			<view style=" position:absolute;top: 96rpx;;transform: translateY(-50%);width: 630rpx;height: 1rpx;background: #eee"></view>
		</view>

		<!-- 验证码输入区域 -->
		<view class="input-group" v-if="showVerificationCode">
			<input class="code-input" type="number" placeholder="请输入验证码" v-model="verificationCode"
				@input="handleCodeInput" :class="{ 'error-border': showVerificationError }" />
			<text class="countdown" v-if="countdown > 0">{{ countdown }}s</text>
			<text class="resend" v-else @click="sendSms">重新获取验证码</text>
		</view>

		<!-- 发送验证码/确定改绑按钮 -->
		<button class="action-btn1" :disabled="!isActionBtnEnabled" @click="handleActionBtnClick"
			:class="{ 'btn-active': isActionBtnEnabled }">
			{{ actionBtnText }}
		</button>

		<!-- 错误提示 -->
		<view class="error-tip" v-if="showPhoneError || showVerificationError"><text>{{ errorMsg }}</text></view>
	</view>
</template>
<script>
import { request, getFullImageUrl, initBaseUrl } from '../../../utils/request';
export default {
	data() {
		return {
			phoneNumber: '',
			verificationCode: '',
			isPhoneValid: false,
			isVerificationValid: false,
			showVerificationCode: false,
			showPhoneError: false,
			showVerificationError: false,
			errorMsg: '',
			countdown: 0,
			debounceTimer: null,
			timer: null
		}
	},
	computed: {
		actionBtnText() {
			return this.showVerificationCode ? '确定改绑' : '发送验证码'
		},
		isActionBtnEnabled() {
			return this.showVerificationCode ? this.isVerificationValid : this.isPhoneValid
		}
	},
	methods: {
		handlePhoneInput() {
			if (this.debounceTimer) clearTimeout(this.debounceTimer)
			this.debounceTimer = setTimeout(() => {
				this.showPhoneError = false
				const reg = /^1[3-9]\d{9}$/
				this.isPhoneValid = reg.test(this.phoneNumber)
				if (this.phoneNumber && !this.isPhoneValid) {
					this.showPhoneError = true
					this.errorMsg = '手机号格式错误，请输入正确的格式'
					setTimeout(() => this.showPhoneError = false, 3500)
				}
			}, 300)
		},
		handleCodeInput() {
			this.showVerificationError = false
			this.isVerificationValid = this.verificationCode.length === 6
			if (this.verificationCode && this.verificationCode.length !== 6) {
				this.showVerificationError = true
				this.errorMsg = '验证码长度应为6位'
			}
		},
		sendSms() {
			uni.showLoading({ title: '发送中...' })
			// 调用实际发送验证码接口
			request({
				url: 'Sms/send',
				method: 'POST',
				data: {
					mobile: this.phoneNumber,
					event: 'changemobile' // 事件类型，根据后端要求填写
				}
			}).then(response => {
				uni.hideLoading()
				console.log('发送验证码响应:', response)
				if (response.code === 0) {
					uni.showToast({ title: response.msg || '验证码发送成功', icon: 'success' })
					this.showVerificationCode = true
					this.startCountdown()
				} else {
					uni.showToast({ title: response.msg || '发送失败', icon: 'none' })
				}
			}).catch(error => {
				uni.hideLoading()
				uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' })
				console.error('发送验证码失败:', error)
			})
		},
		startCountdown() {
			this.countdown = 60
			this.timer = setInterval(() => {
				this.countdown--
				if (this.countdown <= 0) {
					clearInterval(this.timer)
				}
			}, 1000)
		},
		verifyCode() {
			uni.showLoading({ title: '提交中...' })
			// 调用后端改绑手机号接口
			request({
				url: 'User/changemobile',
				method: 'POST',
				data: {
					mobile: this.phoneNumber,
					captcha: this.verificationCode
				}
			}).then(response => {
				uni.hideLoading()
				if (response.code === 0) {
					uni.showToast({ title: '改绑成功', icon: 'success' })
					setTimeout(() => uni.navigateBack(), 1500)
				} else {
					this.showVerificationError = true
					this.errorMsg = response.msg || '验证码错误，请重新输入'
					setTimeout(() => {
						this.showVerificationError = false
					}, 3000);
				}
			}).catch(error => {
				uni.hideLoading()
				uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' })
				console.error('改绑手机号失败:', error)
			})
		},
		handleActionBtnClick() {
			if (this.showVerificationCode) {
				this.verifyCode()
			} else {
				this.sendSms()
			}
		}
	},
	onUnload() {
		if (this.timer) clearInterval(this.timer)
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #F2F3F8;
}

.sms-login-page {
	padding: 60rpx;
	background-color: #ffffff;
	height: 542rpx;
	border-radius: 35rpx;
	margin-top: 50rpx;
	padding-top: 87rpx;


	// 标题
	.title {
		font-family: Source Han Sans CN;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 44rpx;
		color: #0E1C37;
		line-height: 26rpx;
		margin-bottom: 35rpx;
	}

	// 说明文字
	.desc {
		font-weight: 400;
		font-size: 30rpx;
		color: #A3A6B7;
		line-height: 26rpx;
		margin-bottom: 100rpx;
	}

	// 输入区域	
	.input-group {
		position: relative;
		display: flex;
		align-items: center;

		border-radius: 10rpx;
		padding: 6rpx 20rpx;
		margin-bottom: 170rpx;
		// margin-top: -80rpx;

		.country-code {
			display: flex;
			align-items: center;
			border-right: 1px solid #eee;
			padding-right: 20rpx;

			.sanjiao {
				width: 0;
				height: 0;
				border-top: 8rpx solid #0E1C37;
				/* 保留上边框 */
				border-left: 8rpx solid transparent;
				/* 左侧透明边框 */
				border-right: 8rpx solid transparent;
				/* 右侧透明边框 */
				border-bottom: 0;
				/* 取消下边框 */
				margin-left: 20rpx;
			}

			text {
				font-size: 32rpx;
				color: #0E1C37;
			}
		}



		// 输入框错误边框
		.error-border {
			font-size: 30rpx;
			color: #F71737;
		}

		.phone-input {
			flex: 1;
			height: 80rpx;
			font-size: 28rpx;
			padding-left: 20rpx;
		}
	}

	// 发送验证码按钮
	.send-btn {
		width: 97%;
		height: 80rpx;
		line-height: 80rpx;
		background: #D0D4D7;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #888B9A;

		margin-bottom: 30rpx;

		&:disabled {
			opacity: 0.6;
		}
	}

	.send-btn-active {
		background-color: #BEFF32; // 绿色背景
		color: #0E1C37; // 白色文字
		font-weight: 500;
	}



	// 手机号错误提示
	.error-tip {
		position: fixed;
		bottom: 270rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 500rpx;
		height: 86rpx;
		background: #404040;
		box-shadow: 0rpx 9rpx 13rpx 0rpx rgba(64, 64, 64, 0.27);
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.error-tip text {
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}
}

// 验证码输入区域
.input-group.code-input-group {
	margin-bottom: 60rpx;
}

.code-input {
	flex: 1;
	height: 80rpx;
	font-size: 28rpx;
	padding-left: 20rpx;
}

.countdown {
	color: #A3A6B7;
	font-size: 28rpx;
	margin-left: 20rpx;
}

.resend {
	font-family: Source Han Sans CN;
	font-weight: 400;
	font-size: 32rpx;
	color: #5894F6;
	line-height: 26rpx;
	margin-left: 20rpx;
	cursor: pointer;
}

// 统一按钮样式
.action-btn1 {
	width: 97%;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 12rpx;
	font-size: 32rpx;
	font-weight: 500;
	margin-bottom: 30rpx;
	margin-top: 120rpx;
}

// 微信小程序禁用按钮样式
wx-button[disabled]:not([type]),
wx-button[disabled][type=default] {
	background: #D0D4D7 !important;
	color: #888B9A !important;
}

.btn-active {
	margin-top: 120rpx;
	background-color: #BEFF32;
	color: #0E1C37;
}

// 错误状态
.error-border {
	color: #F71737 !important;
	border-color: #F71737 !important;
}
</style>